<template>
	<view class="daily-mission">
		<uv-popup ref="dailyPopup" mode="bottom" bgColor="none" overlayOpacity="0.8" zIndex="99999" :safeAreaInsetBottom="false" @change="change">
			<view class="daily-mission-pop">
				<view class="gold-info">
					<view class="balance">金币余额</view>
					<view class="balance-box">
						<view class="balance-num">{{balance | setBalance}}</view>
						<view class="top-up" @tap.stop.prevent="goTopUp">去充值</view>
					</view>
				</view>

				<view class="task-list">
					<view v-for="(item,index) in taskList" :key="item.id">
						<!-- 分享 -->
						<button class="task-item" open-type="share" :class="{'task-item-1': index == 0}" @tap.stop.prevent="atMenu(item)"
							v-if="item.id == 'share'">
							<view class="left-icon-wrap">
								<view class="left-icon dy-iconfont" :class="item.icon"></view>
							</view>
							<view class="content-wrap">
								<view class="title">{{item.title}}</view>
								<view class="content">{{item.activityRemark}}</view>
							</view>
							<view class="right-btn-wrap" :class="{'right-btn-wrap-wc': index == 3}">{{item.name}}</view>
							<image class="finger" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/sz.png"></image>
						</button>

						<!-- 收藏 -->
						<button class="task-item" open-type="addShortcut" :class="{'task-item-1': index == 0}" @tap.stop.prevent="atMenu(item)"
							v-else-if="item.id == 'collect' && item.completeState != 1" @addshortcut="addshortcut">
							<view class="left-icon-wrap">
								<view class="left-icon dy-iconfont" :class="item.icon"></view>
							</view>
							<view class="content-wrap">
								<view class="title">{{item.title}}</view>
								<view class="content">{{item.activityRemark}}</view>
							</view>
							<view class="right-btn-wrap" :class="{'right-btn-wrap-wc': item.completeState == 1}">
								{{item.completeState == 1 ? item.com_name : item.name}}
							</view>
						</button>

						<!-- 抖音粉丝群 -->
						<!-- #ifdef MP-TOUTIAO -->
						<button class="task-item" open-type="joinGroup" @joingroup="handleJoinGroup"
							group-id="CgYIASAHKAESTgpMTC1pdv92JNiWE3y5jJDZOhjxO+/yLcoyUZj46IIHrY0a++BUjPjALqMr6RHv0TGwCLBn9G5kCKKsasqedcwFzgVZDn5gogelT27+5xoA"
							:class="{'task-item-1': index == 0}" @tap.stop.prevent="atMenu(item)" v-else-if="item.id == 'fulig' && item.completeState != 1">
							<view class="left-icon-wrap">
								<view class="left-icon dy-iconfont" :class="item.icon"></view>
							</view>
							<view class="content-wrap">
								<view class="title">{{item.title}}</view>
								<view class="content">{{item.activityRemark}}</view>
							</view>
							<view class="right-btn-wrap" :class="{'right-btn-wrap-wc': item.completeState == 1}">
								{{item.completeState == 1 ? item.com_name : item.name}}
							</view>
						</button>
						<!-- #endif -->

						<view class="task-item" :class="{'task-item-1': index == 0}" @tap.stop.prevent="atMenu(item)" v-else>
							<view class="left-icon-wrap">
								<view class="left-icon dy-iconfont" :class="item.icon"></view>
							</view>
							<view class="content-wrap">
								<view class="title">{{item.title}}</view>
								<view class="content">{{item.activityRemark}}</view>
							</view>
							<view class="right-btn-wrap" v-if="item.id == 'share' || item.id == 'look'">{{item.name}}</view>

							<view class="right-btn-wrap" v-else :class="{'right-btn-wrap-wc': item.completeState == 1}">
								{{item.completeState == 1 ? item.com_name : item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="close-icon dy-iconfont icon-close-full" @tap.stop.passive="closePop"></view>
			</view>
		</uv-popup>
		<!-- <view class="daily-mission-click" @tap.stop.passive="goMission">
			<slot></slot>
		</view> -->
	</view>
</template>
<script>
	const app = getApp();
	import { getShelfList, getAward } from '@/common/api';
	export default {
		name: "daily-mission",
		props: {
			type: {
				type: String,
				default: 'image' // image|icon
			},
			icon: {
				type: String,
				default: 'dy-iconfont icon-empty'
			},
			image: {
				type: String,
				default: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/empty.png'
			},
			width: {
				type: Number,
				default: 260
			},
			padding: {
				type: String,
				default: '130rpx 0'
			},
			fixed: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				taskList: [{
						id: 'share',
						name: '去分享',
						com_name: '去分享',
						title: '分享好友，每日可领10次',
						content: 'x',
						icon: 'icon-JC_054'
					},
					{
						id: 'look',
						name: '去看剧',
						com_name: '去看剧',
						title: '每日看剧',
						content: '最高领100币',
						icon: 'icon-bofang'
					},
					{
						id: 'fulig',
						name: '去完成',
						com_name: '已完成',
						title: '添加福利官',
						content: '领100币',
						icon: 'icon-fuliguan'
					},
					{
						id: 'collect',
						name: '去完成',
						com_name: '已完成',
						// #ifdef MP-WEIXIN
						title: '添加到小程序',
						// #endif

						// #ifdef MP-TOUTIAO
						title: '添加到桌面',
						// #endif
						content: '领5币',
						icon: 'icon-shoucang1'
					}
				],
				balance: '0',
			};
		},
		filters: {
			setBalance: function(value) {
				return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			}
		},
		methods: {
			goMission() {
				uni.showLoading({
					title: '正在加载',
					mask: true
				});
				getShelfList().then((result) => {
					if (result.activityList.length <= 0) {
						uni.hideLoading();
						uni.showModal({
							title: "友情提示",
							content: '暂无活动信息',
							showCancel: false
						});
						return
					}
					this.taskList.forEach((item, index) => {
						this.$set(this.taskList, index, Object.assign(item, result.activityList[index]))
						if (item.id == 'share' || item.id == 'look') {
							this.$set(item, 'title', item.activityName)
						}
					})
					this.balance = result.myBalance.accountBalance

					// #ifdef MP-WEIXIN
					wx.checkIsAddedToMyMiniProgram({
						success: (data) => {
							if (data.added && result.activityList[3].completeState == 0) {
								getAward({
									"activityId": this.taskList[3].activityId,
									"everyGoldNum": this.taskList[3].everyGoldNum
								}).then((result) => {
									this.$set(this.taskList[3], 'completeState', 1)
									this.balance = Number(this.balance) + Number(this.taskList[3].everyGoldNum)
								});
							}
						}
					})
					// #endif

					uni.hideLoading();
					this.$refs.dailyPopup.open();
				}).catch((err) => {
					uni.hideLoading();
				});
			},
			closePop() {
				this.$refs.dailyPopup.close();
			},
			goTopUp() {
				app.navigationTo('page_user/wallet/wallet');
			},
			atMenu(item) {
				switch (item.id) {
					case 'share':
						console.log('share');
						this.closePop()
						// #ifdef MP-WEIXIN
						this.shareSucceed()
						// #endif
						break;
					case 'look':
						this.$emit('lookJu');
						this.closePop()
						break;
					case 'fulig':
						if (item.completeState != 1) {
							// #ifdef MP-WEIXIN
							this.closePop()
							this.$emit('receiveWelfare');
							// #endif
						}
						break;
					case 'collect':
						if (item.completeState != 1) {
							this.closePop()
							// #ifdef MP-WEIXIN
							this.$emit('collect');
							// #endif
						}
						break;
				}
			},
			// 添加到桌面能力 抖音
			addshortcut(event) {
				console.log('addshortcut', event);
				getAward({
					"activityId": this.taskList[3].activityId,
					"everyGoldNum": this.taskList[3].everyGoldNum
				}).then((result) => {
					this.goMission()
				});

				// setTimeout(() => {
				// 	this.goMission()
				// }, 1000)
			},
			// 分享成功 
			shareSucceed() {
				console.log('分享成功', this.taskList)
				getAward({
					"activityId": this.taskList[0].activityId,
					"everyGoldNum": this.taskList[0].everyGoldNum
				}).then((result) => {
					console.log('shareSucceed', result);
					this.goMission()
				});
			},
			// 加入粉丝群 抖音
			handleJoinGroup(e) {
				console.log('Join成功', e);
			},
			change(e) {
				this.$emit('change', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: "DINPro-Black";
		font-weight: 700;
		src: url('data:application/x-font-woff2;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMmMCCLQAAACsAAAAYGNtYXAJ7BEyAAABDAAAAUpnbHlm3XUtcQAAAlgAAAMcaGVhZAPGQCUAAAV0AAAANmhoZWEGPAFyAAAFrAAAACRobXR4BYsBNgAABdAAAAAabG9jYQP8BMQAAAXsAAAAGG1heHAADwAoAAAGBAAAACBuYW1lvy/DBAAABiQAAAW4cG9zdP/gALYAAAvcAAAAOAAEAiECvAAFAAQC0QJZAAAAAALRAlkAAAEdADIA+gAAAgAFAwMAAAIABIAAAq8QAAAAAAAAAAAAAABGU0kAAAAAMAA5Avz/FAEgBBEA7SAAAJ8AAAAAAgACyAAAACAABAAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgA5/////wAAADD//////9EAAQABAAAAAAAAAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQIDBAUGBwgJCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIASQAAAfQCyAADAAcAADcRIRElMxEjSQGr/qz9/QACyP04VwIaAAACADf/+gHoAs4ACwAXAAAlFAYiJjURNDYyFhUDETQmIgYVERQWMjYB6H22fn62fYIvTjAwTi/OYnJyYgEsYnJyYv7VASktNDUs/tcsNDQAAAEAZwAAAXoCyAAGAAAlIxEHNTczAXqCkZGCAAI8fox+AAAAAAEAOwAAAewCzgAXAAAlITUBNjU0JiMiBhUjNDYzMhYVFAYPASEB7P5PAQolLSklMoJ7XmB4IirHARMAdQE1LCooMSswX3FwXzBCMecAAAAAAQAq//oB7wLOACUAACUUBiMiJiczHgEzMjY1NCYrATUzMjY1NCYiBgcjPgEzMhYVFAcWAe+BYV+DAYIBNykrNTUvExMtLTJKMQKCAnxcX3pSXM5mbmlpLi80Ly01cTEoKzAuKF1uclpmLDEAAQAfAAACAALIAA4AACUjFSM1ITUTMwMzNTMVMwIAQX3+3fSO9JV9QWVlZXsB6P4YhYUAAAEAOf/6Ae4CyAAfAAAlFAYHBiMiJyYnMxYzMjc2NTQjIgcjESEVIRU2MzIXFgHuGiU6Y2Y5MweCC0wnFxxXQxN3AZb+4CZFVTBA8EFWJTo5M2FYFxxOgDoBknWZJDBAAAIAMP/6AewCyAAOABcAACUUBiImNTQ3EzMDNjMyFgc0JiIGFBYyNgHsfcJ9PJaOlBYfTG+CM1IzM1Iz2Gd3dWdEegE0/toJdGAvOThgODgAAQAyAAAB9wLIAAgAAAEDIxMjFSM1IQH3543nvHwBxQJT/a0CU3DlAAMALP/6AfQCzgAOABYAIAAAABQGIiY1NDcmNDYyFhQHBjQmIgYUFjITNCYiBhUUFjI2AfSBxoFZUH+4flAoOVI5OVIvMkwzM0wyATPIcXFkZTs4uG9vuDjHUjo6UjkBkCY0NCYnMzMAAgAzAAAB7wLOAA4AFwAAARQHAyMTBiMiJjU0NjIWBjQmIgYVFBYyAe87l42UFh9McH3CfYIzUjMzUgHyRnj+zAEmCXRfZ3d1mGA4ODAvOQABAAAAB3XDa4HJRV8PPPUACwPoAAAAAMBPIAgAAAAA4jJmrQAf//oCAALOAAAACAACAAAAAAAAAAEAAAQR/xMACgI9AB8AHwIAAAEAAAAAAAAAAAAAAAAAAAACAj0ASQIfADcAZwA7ACoAHwA5ADAAMgAsADMAAAAAABQAPABOAHYArADGAPYBHgEyAWYBjgABAAAACwAmAAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAIAGGAAEAAAAAAAAAPQAAAAEAAAAAAAEACwA9AAEAAAAAAAIABwBIAAEAAAAAAAMAFQBPAAEAAAAAAAQACwBkAAEAAAAAAAUAJQBvAAEAAAAAAAYACwCUAAEAAAAAAAcAMQCfAAEAAAAAAAgAGwDQAAEAAAAAAAkADwDrAAEAAAAAAAsAFwD6AAEAAAAAAAwAFwERAAEAAAAAAA4AKQEoAAEAAAAAABAABgFRAAEAAAAAABEABAFXAAEAAAAAABIACwFbAAMAAQQJAAAAegFmAAMAAQQJAAEAFgHgAAMAAQQJAAIADgH2AAMAAQQJAAMAKgIEAAMAAQQJAAQAFgIuAAMAAQQJAAUASgJEAAMAAQQJAAYAFgKOAAMAAQQJAAcAYgKkAAMAAQQJAAgANgMGAAMAAQQJAAkAHgM8AAMAAQQJAAsALgNaAAMAAQQJAAwALgOIAAMAAQQJAA4AUgO2AAMAAQQJABAADAQIAAMAAQQJABEACAQUAAMAAQQJABIAFgQcMjAwNSBBbGJlcnQtSmFuIFBvb2wgcHVibGlzaGVkIGJ5IEZTSSBGb250cyB1bmQgU29mdHdhcmUgR21iSERJTlByby1Cb2xkUmVndWxhcjcuNDYwO0ZTSTtESU5Qcm8tQm9sZERJTlByby1Cb2xkVmVyc2lvbiA3LjQ2MDtQUyA3LjA0Njtob3Rjb252IDEuMC4zOERJTlByby1Cb2xkRElOIGlzIGEgdHJhZGVtYXJrIG9mIEZTSSBGb250cyB1bmQgU29mdHdhcmUgR21iSEZTSSBGb250cyB1bmQgU29mdHdhcmUgR21iSEFsYmVydC1KYW4gUG9vbGh0dHA6Ly93d3cuZm9udGZvbnQuY29taHR0cDovL3d3dy5mb250Zm9udC5jb21odHRwOi8vd3d3LmZvbnRmb250LmNvbS9ldWxhL2xpY2Vuc2UuaHRtbERJTlByb0JvbGRESU5Qcm8tQm9sZAAyADAAMAA1ACAAQQBsAGIAZQByAHQALQBKAGEAbgAgAFAAbwBvAGwAIABwAHUAYgBsAGkAcwBoAGUAZAAgAGIAeQAgAEYAUwBJACAARgBvAG4AdABzACAAdQBuAGQAIABTAG8AZgB0AHcAYQByAGUAIABHAG0AYgBIAEQASQBOAFAAcgBvAC0AQgBvAGwAZABSAGUAZwB1AGwAYQByADcALgA0ADYAMAA7AEYAUwBJADsARABJAE4AUAByAG8ALQBCAG8AbABkAEQASQBOAFAAcgBvAC0AQgBvAGwAZABWAGUAcgBzAGkAbwBuACAANwAuADQANgAwADsAUABTACAANwAuADAANAA2ADsAaABvAHQAYwBvAG4AdgAgADEALgAwAC4AMwA4AEQASQBOAFAAcgBvAC0AQgBvAGwAZABEAEkATgAgAGkAcwAgAGEAIAB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAEYAUwBJACAARgBvAG4AdABzACAAdQBuAGQAIABTAG8AZgB0AHcAYQByAGUAIABHAG0AYgBIAEYAUwBJACAARgBvAG4AdABzACAAdQBuAGQAIABTAG8AZgB0AHcAYQByAGUAIABHAG0AYgBIAEEAbABiAGUAcgB0AC0ASgBhAG4AIABQAG8AbwBsAGgAdAB0AHAAOgAvAC8AdwB3AHcALgBmAG8AbgB0AGYAbwBuAHQALgBjAG8AbQBoAHQAdABwADoALwAvAHcAdwB3AC4AZgBvAG4AdABmAG8AbgB0AC4AYwBvAG0AaAB0AHQAcAA6AC8ALwB3AHcAdwAuAGYAbwBuAHQAZgBvAG4AdAAuAGMAbwBtAC8AZQB1AGwAYQAvAGwAaQBjAGUAbgBzAGUALgBoAHQAbQBsAEQASQBOAFAAcgBvAEIAbwBsAGQARABJAE4AUAByAG8ALQBCAG8AbABkAAIAAAAAAAD/YAAzAAAAAAAAAAAAAAAAAAAAAAAAAAsACwAAABMAFAAVABYAFwAYABkAGgAbABw=') format('woff2');
		font-display: swap;
	}

	.daily-mission {
		.daily-mission-pop {
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/welfare-pop-1.png');
			background-repeat: no-repeat;
			background-size: cover;
			width: 100vw;
			height: 1034rpx;
			box-sizing: border-box;
			padding: 131rpx 24rpx 111rpx;
			position: relative;

			.gold-info {
				padding-left: 24rpx;
				box-sizing: border-box;

				.balance {
					font-weight: 600;
					font-size: 26rpx;
					color: #71370B;
					line-height: 37rpx;
					text-align: left;
					margin-bottom: 12rpx;
				}

				.balance-box {
					display: flex;
					align-items: center;

					.balance-num {
						font-family: "DINPro-Black";
						font-size: 48rpx;
						color: #FF6F00;
						line-height: 57rpx;
						text-align: left;
					}

					.top-up {
						width: 118rpx;
						height: 56rpx;
						background: linear-gradient(313deg, #FDDA94 0%, #FFF6E5 68%, #FFE8C0 100%);
						border-radius: 40rpx;
						border: 1rpx solid #F9D0A2;
						font-weight: 600;
						font-size: 26rpx;
						color: #462B0C;
						line-height: 56rpx;
						text-align: center;
						margin-left: 26rpx;
					}
				}
			}

			.task-list {
				margin-top: 40rpx;

				.task-item {
					display: flex;
					align-items: center;
					width: 100%;
					height: 146rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					box-sizing: border-box;
					padding: 20rpx;
					margin-top: 20rpx;
					position: relative;
					border: none;

					&::after {
						border: none;
					}

					&.task-item-1 {
						background: #FFDEBA;
						border-radius: 32rpx;
						border: 1rpx solid #FF6F00;

						.left-icon-wrap {
							background: #F9F5F0;
						}
					}

					.left-icon-wrap {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 106rpx;
						height: 106rpx;
						background: #F9F5F0;
						border-radius: 50%;
						margin-right: 20rpx;

						.left-icon {
							font-size: 40rpx;
							color: #FF6F00;
						}
					}

					.content-wrap {
						flex: 1;

						.title {
							font-weight: 600;
							font-size: 32rpx;
							color: #71370B;
							line-height: 45rpx;
							text-align: left;
							margin-bottom: 11rpx;
						}

						.content {
							font-weight: 400;
							font-size: 26rpx;
							color: #71370B;
							line-height: 37rpx;
							text-align: left;
						}
					}

					.right-btn-wrap {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 138rpx;
						height: 59rpx;
						background: linear-gradient(150deg, #FF6F00 0%, #FFE67E 100%);
						border-radius: 40rpx;
						font-weight: 600;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 59rpx;
						text-align: center;
						margin-left: 6rpx;

						&.right-btn-wrap-wc {
							background: #BBBCBB;
						}
					}

					.finger {
						width: 76rpx;
						height: 77rpx;
						position: absolute;
						bottom: -2rpx;
						right: -2rpx;
					}
				}
			}

			.close-icon {
				font-size: 20rpx;
				width: 40rpx;
				height: 40rpx;
				color: #FFFCFC;
				border: 1rpx solid #FFFFFF;
				border-radius: 50%;
				position: absolute;
				top: 19rpx;
				right: 11rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.daily-mission-click {
			position: fixed;
			bottom: 250rpx;
			right: 0;
			z-index: 9999;
		}
	}
</style>